import React, { useEffect, useState, useRef } from "react";
import styles from "./TimeView.module.css";

const TimeView = () => {
  const timer = useRef();
  const [Hour, setHour] = useState("");
  const [Minutes, setMinutes] = useState("");
  const [Seconds, setSeconds] = useState("");

  const getNowTime = () => {
    const time = new Date();
    const h = time.getHours();
    const hour = h <= 9 ? "0" + h : h;
    const m = time.getMinutes();
    const minutes = m <= 9 ? "0" + m : m;
    const s = time.getSeconds();
    const seconds = s <= 9 ? "0" + s : s;

    setHour(hour);
    setSeconds(seconds);
    setMinutes(minutes);
  };

  useEffect(() => {
    timer.current = setInterval(getNowTime, 10);
    return () => {
      clearTimeout(timer.current);
    };
  }, []);

  return (
    <div className={styles.time_box}>
      <span>{Hour}</span>
      {Hour && <span>{":"}</span>}
      <span>{Minutes}</span>
      {Minutes && <span>{":"}</span>}
      <span>{Seconds}</span>
    </div>
  );
};

export default TimeView;
